<settings-screen>
  <div class="row">
    <type-picker img-root="/static/images/db-logos"
                 types="types"
                 title="New Data Source"
                 on-type-select="setType"
                 ng-if="dataSource.type === undefined"></type-picker>

    <div ng-if="dataSource.type !== undefined">
      <div class="creation-container">
        <div class="col-xs-12 col-sm-4">
          <a ng-click="resetType()" ng-if="canChangeType">← Change <span class="hidden-xs">Type</span></a>
        </div>

        <div class="col-xs-12 col-sm-4 text-center">
          <img ng-src="/static/images/db-logos/{{dataSource.type}}.png" alt="{{type.name}}" width="64">
          <h3>{{type.name}}</h3>
        </div>

        <div class="col-xs-12 col-sm-4">
          <p class="needhelp text-right text-center-xs" ng-if="helpLinks[type.type]">
            <a ng-href="{{helpLinks[type.type]}}" target="_blank" >
              Help <span class="hidden-xs">setting up {{type.name}}</span> <i class="fa fa-external-link" aria-hidden="true"></i>
            </a>
          </p>
        </div>
      </div>

      <div class="clearboth"></div>

      <div class="col-md-4 col-md-offset-4">
        <dynamic-form target="dataSource" type="type" actions="actions">
        </dynamic-form>
      </div>
    </div>
  </div>
</settings-screen>
